import { Layout, Menu, Button, theme } from 'antd';
import { 
  VideoCameraOutlined, 
  HomeOutlined, 
  LogoutOutlined 
} from '@ant-design/icons';
import { Link, Outlet, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const { Header, Content, Sider } = Layout;

const AppLayout = () => {
  const { username, logout } = useAuth();
  const location = useLocation();
  const { token } = theme.useToken();

  // 菜单项
  const menuItems = [
    {
      key: '/',
      icon: <HomeOutlined />,
      label: <Link to="/">首页</Link>,
    },
    {
      key: '/video',
      icon: <VideoCameraOutlined />,
      label: <Link to="/video">视频处理</Link>,
    },
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'space-between',
        background: token.colorPrimary
      }}>
        <div style={{ color: 'white', fontSize: '18px', fontWeight: 'bold' }}>
          随心播工具系统
        </div>
        <div style={{ color: 'white', display: 'flex', alignItems: 'center' }}>
          <span style={{ marginRight: '12px' }}>欢迎，{username}</span>
          <Button 
            type="text" 
            icon={<LogoutOutlined />} 
            onClick={logout}
            style={{ color: 'white' }}
          >
            退出
          </Button>
        </div>
      </Header>
      <Layout>
        <Sider width={200} theme="light">
          <Menu
            mode="inline"
            selectedKeys={[location.pathname]}
            style={{ height: '100%', borderRight: 0 }}
            items={menuItems}
          />
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: '#fff',
              borderRadius: '4px',
              marginTop: '24px',
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default AppLayout; 